<template>
  <el-dialog :visible.sync="warningVisible" @close="destroyElement"
             :width="width"
             :show-close="showClose"
             :close-on-click-modal="showClose"
             :close-on-press-escape="showClose"
             class="credit-up"
  >
    <div class="credit-up__status-title" slot="title">
      上分详情
    </div>

    <el-form class="main-container-main__form" :model="form" ref="form" :disabled="loading"
             @submit.native.prevent="submit"
             label-position="top"
    >
      <dialog-subtitle>
        <div class="credit-up__user-info">
          上分金额：{{withdrawInfo.amount | currency}}<br>
          会员上分：{{withdrawInfo.usedCreditAmount | currency}}<br>
          剩余上分：{{withdrawInfo.validAllocateAmount | currency}}<br>
        </div>
      </dialog-subtitle>
      <el-form-item vertical-fill>
          <el-button
            type="primary"
            @click="close"
          >知道了
          </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script type="text/jsx">
  import form from '@/mixins/form';

  import {getWithdrawInfo} from '@/services/api/finance';

  export default {
    name: "credit-up-detail",

    mixins: [form],

    data() {
      return {
        info:{},
        warningVisible: true,
        width: consts.DIALOG_SIZE_NORMAL,
        showClose: true,
        closed: false,
        form: {
          targetUserId: undefined,
          amount: undefined,
        },
        fetchData: {},
        formError: '',
        callback: _.noop,
        withdrawInfo: {},
        filters: {
          proxyId: undefined,
        },
      }
    },

    computed: {},

    watch: {
      closed(newVal) {
        if (newVal) {
          this.warningVisible = false;
        }
      }
    },

    methods: {
      close() {
        this.closed = true;
        if (typeof this.onClose === 'function') {
          this.onClose(this);
        }
      },
      destroyElement() {
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      },
    },

    mounted() {
      this.filters.proxyId = this.info.id;
      this.bindGet(getWithdrawInfo, 'withdrawInfo', {
        action: 'getGrid',
        sendingData: 'filters',
      });

      this.getAll();
    }
  };
</script>

<style lang="scss" scoped>
  @include b(credit-up) {
    @include e(status-title) {
      height: 60px;
      font-size: 28px;
      font-weight: bold;
      line-height: 60px;
    }
    @include e(user-info) {
      width: 300px;
      line-height: 30px;
      text-align: left;
      color: #000000;
      font-size: 14px;
      margin: 0 auto;
    }
  }

</style>
